<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
  <style>
    #d1 {
      width: 200px;
      height: 200px;
      /* 常用边框 solid */
      border: 10px solid red;
      /* 双实线边框 double */
      border: 10px double red;
      /* 圆点边框 dotted */
      border: 10px dotted red;
      /* 虚线边框 dashed */
      border: 10px dashed red;
      /* 3D边框1 groove */
      border: 10px groove red;
      /* 3D边框2 ridge */
      border: 10px ridge red;
      /* 3D边框3 inset */
      border: 10px inset red;
      /* 3D边框4 outset */
      border: 10px outset red;

      /* 边框圆角 超过边框的一半就是正圆 */
      border-radius: 150px;
    }
    #d2 {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /* 给元素添加内边距 默认情况下回影响元素的显示范围 */
      /* 添加上内边距 */
      padding-top: 50px;
      /* 添加下内边距 */
      padding-bottom: 50px;
      /* 添加左内边距 */
      padding-left: 50px;
      /* 添加右内边距 */
      padding-right: 50px;
      /* 四个方向添加内边距 */
      padding: 10px;
      /* 上下 左右 添加内边距 */
      padding: 10px 20px;
      /* 上右下左 顺时针添加内边距 */
      padding: 10px 20px 30px 40px;
      /* 添加完此样式后 外边距和边框不再影响宽高 */
      box-sizing: border-box;
    }
  </style>
</head>
<!-- body 自带8个像素的外边距 -->
<body>
<!-- 段落标签p 列表标签 和内容标题h1-h6 自带上下的外边距 -->
<h1>这是h1</h1>
<p>这是段落标签</p>
<!-- 列表标签还自带外边距和内边距 -->
<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>
<!-- 文本框自带边框 和 内边距 -->
<input type="text">
<div id="d1">边框测试</div>
<div id="d2">内边距</div>
</body>
</html>